<template>
	<view class="sort">
		<view class="sort-container">
			<view class="list">
				<view
					v-for="(item, idx) in menuList"
					:key="idx"
					class="item"
					@click="onSwitchSort(idx)">
					<text :class="{ 'font-color-red': item.sortValues[item.sortValueIndex] === 1 }">{{ item.text }}</text>
					<view
						v-if="hasIcon(item.sortValues[item.sortValueIndex])"
						class="icon icon--default"
						:class="[`icon--${item.sortValues[item.sortValueIndex]}`]">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const SORT_VALUE = ['default', 'asc', 'desc']
	export default {
		data() {
			return {
				menuList: [
					{
						text: '新品上线',
						sortValueIndex: 0,
						sortValues: [1]
					},
					{
						field: 'priceOrder',
						text: '价格',
						sortValueIndex: 0,
						sortValues: SORT_VALUE,
						union: false
					},
					{
						field: 'salesOrder',
						text: '销量',
						sortValueIndex: 0,
						sortValues: SORT_VALUE,
						union: false
					},
					{
						field: 'news',
						text: '新品',
						sortValueIndex: 0,
						sortValues: [0, 1],
						union: true
					}
				]
			}
		},
		computed: {
			hasIcon () {
				return function (sortValue) {
					return SORT_VALUE.includes(sortValue)
				}
			},
			params () {
				let tempParams = {}
				for (let i = 0; i < this.menuList.length; i++) {
					const tempSortItem = this.menuList[i]
					if (tempSortItem.field !== undefined) {
						tempParams[tempSortItem.field] = tempSortItem.sortValues[tempSortItem.sortValueIndex]
					}
				}
				return tempParams
			}
		},
		watch: {
			params (newVal) {
				this.$emit('sort', newVal)
			}
		},
		methods: {
			onSwitchSort (idx) {
				const curSortItem = this.menuList[idx]
				for (let i = 0; i < this.menuList.length; i++) {
					const tempSortItem = this.menuList[i]
					if (i === idx) {
						tempSortItem.sortValueIndex = (tempSortItem.sortValueIndex + 1) % tempSortItem.sortValues.length
					} else {
						if ((false === (curSortItem.union || tempSortItem.union)) && (curSortItem.field !== undefined)) {
							tempSortItem.sortValueIndex = 0
						}
					}
				}
				
				if (idx === 0) {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.sort {
	position: fixed;
	left: 0;
	top: 86rpx;
	z-index: 9;
	width: 100%;
	height: 86rpx;
	&-container {
		color: #454545;
		font-size: 28rpx;
		height: 100%;
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
		background-color: #fff;
		.list {
			display: flex;
			align-items: center;
			height: 100%;
			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				height: 100%;
				
				.icon {
					display: inline-block;
					width: 7px;
					height: 9px;
					margin-left: 5px;
					background: url(~@/static/images/sort.png) no-repeat;
					background-position: 0 100px;
					
					&--default {
					  background-position: 0 0;
					  background-size: 100% auto;
					}
					&--asc {
					  background-position: 0 -9px;
					  background-size: 100% auto;
					}
					&--desc {
					  background-position: 0 -18px;
					  background-size: 100% auto;
					}
				}
				
				.font-color-red {
					color: #fc4141;
					font-weight: 700;
				}
			}
		}
	}
}
</style>
